<template>
  <a-card>
    <template #title>
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('平台订单号')">
              <a-input v-model:value="page.platOrderId" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('商户订单号')">
              <a-input v-model:value="page.orderId" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('客户名字')">
              <a-input v-model:value="page.userName" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('身份证号码')">
              <a-input v-model:value="page.idCard" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('银行名称')">
              <a-input v-model:value="page.bankName" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('收款账号')">
              <a-input v-model:value="page.bankNo" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item label="cci">
              <a-input v-model:value="page.cci" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('状态')">
              <a-select v-model:value="page.status" allowClear>
                <a-select-option :value="1">{{ $t('启用') }}</a-select-option>
                <a-select-option :value="0">{{ $t('禁用') }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('失败原因')">
              <a-select v-model:value="page.statusDesc" allowClear>
                <a-select-option v-for="item in failureReasonList" :key='item' :value="item">{{
                    item
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('分单时间')">
              <a-range-picker style="width: 100%" v-model:value="page.createTime" valueFormat="YYYY-MM-DD"
                              format="YYYY-MM-DD"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('打款时间')">
              <a-range-picker style="width: 100%" v-model:value="page.paymentTime" valueFormat="YYYY-MM-DD"
                              format="YYYY-MM-DD"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" @click="getTableData">{{ $t('查询') }}</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">{{ $t('重置') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </template>
    <a-table row-key="id" :data-source="tableData" :columns="tableColumn"
             :scroll="{x:1000}"
             :pagination="pagination">
      <template #voucher="{record}">
        <a-image
            v-if="record.voucher"
            :src="record.voucher"
        />
      </template>
    </a-table>
  </a-card>
</template>

<script>
import {onMounted, reactive, ref, toRefs, computed} from 'vue'
import {fetchPaymentAllList, fetchPaymentFailureReason} from "../../../api/payment"
import {message, Modal} from "ant-design-vue";
import i18n from "../../../locale";

const $t = i18n.global.t
const tableColumn = [
  {title: $t('平台订单号'), dataIndex: 'platOrderId', width: 100, align: 'center'},
  {title: $t('商户订单号'), dataIndex: 'orderId', width: 100, align: 'center'},
  {title: $t('客户名字'), dataIndex: 'userName', width: 100, align: 'center'},
  {title: $t('身份证号码'), dataIndex: 'idCard', width: 150, align: 'center'},
  {title: $t('银行名称'), dataIndex: 'bankName', width: 150, align: 'center'},
  {title: $t('收款账号'), dataIndex: 'bankNo', width: 100, align: 'center'},
  {title: 'cci', dataIndex: 'cci', width: 100, align: 'center'},
  {title: $t('到账金额'), dataIndex: 'payAmount', width: 100, align: 'center'},
  {title: $t('分单时间'), dataIndex: 'createTime', width: 100, align: 'center'},
  {title: $t('打款时间'), dataIndex: 'paymentTime', width: 100, align: 'center'},
  {
    title: $t('状态'), dataIndex: 'status', width: 100, align: 'center', customRender: ({text}) => {
      const obj = {
        '-1': $t('打款退回'),
        0: $t('待打款'),
        1: $t('打款中'),
        2: $t('打款成功'),
        3: $t('打款失败'),
      }
      return obj[text]
    }
  },
  {title: $t('打款渠道'), dataIndex: 'paymentChannel', width: 100, align: 'center'},
  {title: $t('交易流水'), dataIndex: 'transactionId', width: 150, align: 'center'},
  {title: $t('凭证'), dataIndex: 'voucher', width: 100, align: 'center', slots: {customRender: 'voucher'}},
  {title: $t('描述'), dataIndex: 'remark', width: 150, align: 'center'},
]
export default {
  name: "PaymentDistributionAllList",

  setup() {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      failureReasonList: []
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total + $t('条'),
      onChange: (value) => {
        state.page.pageNum = value
        methods.getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        methods.getTableData()
      }
    }))
    const methods = {
      async getTableData() {
        const [assignOrderTimeStart, assignOrderTimeEnd] = state.page.createTime || []
        const [paymentTimeStart, paymentTimeEnd] = state.page.paymentTime || []
        const params = {
          ...state.page,
          assignOrderTimeStart, assignOrderTimeEnd, paymentTimeStart, paymentTimeEnd,
          createTime: undefined,
          paymentTime: undefined
        }
        const res = await fetchPaymentAllList(params)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        methods.getTableData()
      },
    }
    onMounted(() => {
      methods.getTableData()
      fetchPaymentFailureReason().then(res => {
        state.failureReasonList = res.data
      })
    })
    return {
      pagination,
      tableColumn,
      ...methods,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>
